<template>
   <div class="personal-desc" :gutter="24">
     <!--基本信息-->
     <div class="basic-info">
       <!--标题-->
       <section-title :title="title"></section-title>
       <!--个人资料-->
       <div class="section-profile">
         <div class="wrap-avatar clearfix">
           <a class="avatar">
             <img src="" alt="" onerror="javascript:this.src='./static/images/avatar/icon-avatar.png';">
           </a>
           <div class="avatar-right clearfix">

             <div class="profile-item clearfix">
               <div class="profile-left"><span>昵    称：</span><em>{{form.nickName}}</em></div>
               <div class="profile-right"><span>真实姓名：</span><em>{{form.name}}</em></div>
             </div>
             <div class="profile-item clearfix">
               <div class="profile-left"><span>性   别：</span><em>{{form.sex}}</em></div>
               <div class="profile-right"><span>籍  贯：</span><em>{{form.address}}</em></div>
             </div>
             <div class="profile-item odd clearfix">
               <div class="profile-left"><span>家庭住址：</span><em>{{form.address}}</em></div>
               <div class="profile-right"><span>邮箱号码：</span><em>{{form.email}}</em></div>
             </div>
             <div class="profile-item even clearfix">
               <div class="profile-left"><span>联系电话：</span><em>{{form.phone}}</em></div>
               <div class="profile-right"><span>种植面积：</span><em>10</em>亩</div>
             </div>
             <div class="profile-item odd clearfix">
               <div class="profile-left"><span>现存枸杞：</span><em>500</em>斤</div>
             </div>
             <div class="profile-desc odd clearfix">
             <span>资料说明：</span>
             <p class="">
               资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明
               资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明资料说明
             </p>
           </div>
           </div>
         </div>
       </div>
     </div>
   </div>
</template>

<script>
import SectionTitle from '../../components/title/SectionTitle'
import {getUserDetails} from '../../api/user'
import Cookies from 'js-cookie'
export default {
  name: 'PersonalDesc',
  components: {SectionTitle},
  data () {
    return {
      title: {
        line: true,
        icon: '',
        name: '基本信息',
        editable: true,
        operate: {
          edit: true
        }
      },

      form: {
        name: '',
        nickName: '',
        address: '',
        sex: '',
        phone: '',
        email: '',
        desc: '个人说明'
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: async function () {
      let params = {
        userId: Cookies.get('userId')
      }
      const promise = await getUserDetails(params)
      console.log('个人信息接口：', promise)
      this.form.name = promise.result.resultJson.name
      this.form.nickName = promise.result.resultJson.nickName
      this.form.sex = promise.result.resultJson.sex
      this.form.address = promise.result.resultJson.homeAddress
      this.form.phone = promise.result.resultJson.phone
      this.form.email = promise.result.resultJson.email
    }
  }
}
</script>

<style scoped>

.no-edit{
  border: none;
}
.label{
  text-align: right;
}
.content{
  text-align: left;
}
.personal-desc{
  height: 100%;
}
.basic-info{
  background-color: #FFF;
  height: 100%;
}
.profile-item{
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.profile-item:hover{
  background-color: #F2F2FE;
}
.profile-item .profile-left,.profile-right{
  width: calc(50% - 20px);
  text-align: left;
  padding-left: 20px;
}
.profile-left{
  float: left;
}
.profile-right{
  float: right;
}
.profile-item .profile-left,.profile-right span{
  font-size: 14px;
}
.profile-item .profile-left em,.profile-item .profile-right em{
  font-size: 14px;
  font-style: normal;
}
.odd{
  background-color: #FFF;
}
.even{
  background-color: #F2F2FE;
}
.profile-desc{
  cursor: pointer;
  line-height: 40px;
}
.profile-desc span{
  width: calc(100px);
  text-align: left;
  padding-left: 20px;
  float: left;
}
.profile-desc p{
  width: calc(100% - 142px);
  text-align: left;
  padding-left: 20px;
  float: right;
  margin: 0;
}
.avatar{
  display: block;
  width: 150px;
  height:150px;
  padding:50px;
  float: left;
  border-right: 1px solid #F6F6F6;
  border-bottom: 1px solid #F6F6F6;
}
.avatar img{
  width: 100%;
  height: 100%;
}
.avatar-right{
  float: right;
  width: calc(100% - 251px);
}
>>>
  .bg-purple{
     background: #d3dce6;
     min-height: 36px;
  }
  .el-col{
    font-size: 16px;
    color: #666;
    line-height: 36px;
    min-height: 36px;
  }

</style>
